<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="script/bootstrap-3.3.7.min.css">

    <title>Ajax</title>
    <link rel="stylesheet" href="script/jquery-ui.1.10.4.css">  <!-- 注意顺序-->
    <style>
        #tog {
            text-align: center;
            width: 100px;
            height: 100px;
            background: #ccc;
        }
    </style>
    <script src="script/jquery-1.10.min.js"></script>
    <script src="script/jquery-ui.1.10.4.min.js"></script>
    <script>
        function formatData(data) {
            console.log(typeof data)

//            JSON.parse(jsonstr); //可以将json字符串转换成json对象
            var jsonstr = JSON.stringify(data); //todo 可以将json对象转换成json对符串
            console.log(typeof jsonstr)
        }

        $(document).ready(function () {
            $("#ab").click(function () {
                $.post("http://127.0.0.1:8000/study/get_user/", //  project dj1.11-python3.6
                    JSON.stringify({
                        name: "菜鸟教程",
                        url: "http://www.runoob.com"
                    }),
                    function (data, status) {
                        if (status == "success" && data.success) {
                            formatData(data.data)
                        } else {
                            alert("接口出错")
                        }
                    });
            })

        })
    </script>
</head>
<body>
<div class="container">
    <div class="row">

    </div>

    <div class="row">
        <div id="tog">

        </div>
        <!-- 颜色style -->
    </div>

    <div class="row">
        <!-- margin-bottom: 10px;  外边距  margin-top: 20px 行间距-->
        <div class="col-md-3" style="margin-bottom: 10px;margin-top: 20px;">
            <div class="btn btn-success" id="ab">ajax</div>

        </div>
    </div>

</div>


</body>
</html>